<template>
  <div class="searche">
    <div class="header">
      <van-nav-bar left-arrow @click-left="$router.push('/home')" >
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
           </template>
           </van-nav-bar>
          <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
  
</form>
       
  </div>   

<div class="remen">
    <span>热门搜索</span>
 <ul>
  <li v-for="(item,index) in bannerList" :key="index" @click="jumpTo(item.keyword)">{{item.keyword}}</li>
 </ul>
</div>
  </div>
</template>

<script>
import Vue from 'vue'; 
import { Search , Toast} from 'vant';
 
import {getHotword} from "../api/kind";
Vue.use(Search);
Vue.use( Toast);

export default {
  data() {
    return {
      value: '',
      bannerList:[],
      val:""

    };
  },
  methods: {
    jumpTo(category){
      this.$router.push("/searchdetail/"+category)
    },
    onSearch() {
    this.getHotword()
    this.$router.push("/searchdetail/"+this.value)
    },
    onCancel() {
      Toast('取消');
    },
    getHotword(){
  getHotword({ keyword:this.value}).then((data) => {
        console.log(data.data.data)
      this.bannerList = data.data.data;
    });
    }
  },
  created () {
    this.getHotword()
//     getSearchList({count:1,limitNum:10}).then((data)=>{
      
//     this.bannerList = data.data.data
// ;
//     })
  }
};
</script>

<style scoped>
.searche{
    padding : 10px;
}
.remen{
    margin: 10px auto;
}
.remen ul{
    display: flex;

    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;

}
.remen ul li{
  width: 30%;
    height: .3rem;
    border: .01rem solid rgb(245, 238, 238);
    background: rgb(246, 234, 234,0.5);
   margin: .1rem 0 ;
   text-align: center;
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>